import React, { Component } from 'react'
import RouterView from '../router/routerView'
import { RouterItem } from '../types/router.d'
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import { PieChartOutlined } from '@ant-design/icons';
import indexModule from './index.module.scss'
import { RouteComponentProps } from 'react-router-dom'
type MenuItem = Required<MenuProps>['items'][number];
function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}
const items: MenuItem[] = [
  getItem('首页', '/index/home', <PieChartOutlined />),
  getItem('商品列表', '/index/shop', <PieChartOutlined />),
  getItem('商户管理', '/index/manger', <PieChartOutlined />),
];
interface IPROPS extends RouteComponentProps {
  children: RouterItem[]
}
export default class index extends Component<IPROPS> {

  render() {
    console.log(indexModule, 123)
    const { children, history } = this.props
    const hangClick = (item: MenuItem) => {
      history.push((item && item.key) as string)
    }
    return (
      <div className={indexModule.wrap}>
        <div className={indexModule.menu}>
          <Menu
            onClick={(item) => hangClick(item)}
            defaultSelectedKeys={['/index/home']}
            mode="inline"
            theme="dark"
            items={items}
          />
        </div>
        <div className={indexModule.views}>
          <RouterView routes={children} />
        </div>
      </div>
    )
  }
}